{% extends '::base.html.twig' %}

{% block resources_attributes %} class="active"{% endblock %}

{% block title %}{{ question.question }}{% endblock %}

{% block body %}

<div class="row-fluid whiteWrapper">


    <fieldset>
        <legend>{% trans %}Questions And Answers{% endtrans %}</legend>
        <hr class="smallHr">
    </fieldset>



    <div class="question">
        <span class="questionSpan">{{ question.question }}</span>
    </div>
    <p>{{ question.questionDetails }}</p>

    <div class="questionAnswers">
        {% if answersCount > question_page_answers_number %}
            <div class="answer">
                <span class="author">
                    <a href="javascript:void(0)" id="seeAllAnswers">
                {% trans %}see all{% endtrans %} {{ answersCount }} {% trans %}answers{% endtrans %}
                        </a>
                        <img src="{{ asset('img/ajax-loader.gif') }}" id="shwoAllAnswersLoader" style="display: none;"/>
                    </span>
                </div>
        {% endif %}

        {% for answer in answers %}
                <div class="answer">
                    <span class="author">{{ answer.user }}</span>
            {{ answer }}
                </div>
        {% endfor %}
            </div>        


    {% if checkFlag %}
            <div class="sendMessageBlock">

                <form class="form-horizontal">
                    <fieldset>
                        <legend>{% trans %}Reply{% endtrans %}</legend>
                        <hr class="smallHr">
                        <div class="control-group">
                            <label class="control-label">{% trans %}Add Your Reply{% endtrans %}</label>
                            <div class="controls">      
                                <textarea cols="3" class="input-xxlarge" id="answertext"></textarea>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="controls">      
                                <label class="checkbox">
                                    <input type="checkbox" id="answerNotify" {% if is_granted('ROLE_USER') and app.user.answerNotify == 1%}checked=""{% endif %}> {% trans %}Notify me when I get an answer{% endtrans %}
                                </label>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">      
                                <button class="btn blue submit" id="addAnswer" type="button" href="javascript:void(0)">{% trans %}Send{% endtrans %}</button>
                                <img src="{{ asset('img/ajax-loader.gif') }}" id="answerLoader" style="float: right;margin-right: 175px;display: none;"/>
                            </div>
                        </div>



                    </fieldset>
                </form>
            </div>
    {% endif %}

        </div>

{% endblock %}

{% block javascripts %}
{{parent()}}
        <script>
          $(document).ready(function(){
              $('#seeAllAnswers').click(function(){
                  //show loader
                      $('#shwoAllAnswersLoader').show();
                      $.ajax({
                        url: "{{ path('get_all_question_answers',{'id' : question.id}) }}",
                        success: function(msg){
                                $('.questionAnswers').html(msg);
                        },
                        complete: function(){
                        }
                      });
              });
      
              //add answer
              $('#addAnswer').click(function(){
                  var answer = $('#answertext').val();
                  if(($.trim(answer)).length > 2){
                      //show loader
                      $('#answerLoader').show();
                      $('#addAnswer').hide();
              
                      if($('#answerNotify').is(':checked')){
                          var notifyFlag = 1;
                      }else{
                          var notifyFlag = 0;
                      }
              
                      $.ajax({
                        url: "{{ path('add_question_answer') }}/{{ question.id }}/"+encodeURIComponent($.trim(answer))+"/"+notifyFlag,
                        success: function(msg){
                            $('.questionAnswers').append(msg);
                        },
                        complete: function(){
                            $('#answerLoader').hide();
                            $('#addAnswer').show();
                            $('#answertext').val("");
                        }
                      });
                  }
              });
          });
            </script>
{% endblock %}